<template>
  <view class="counselor-card card-shadow">
    <view class="card-content">
      <view class="card-avatar">
        <wd-img
          round
          :width="100"
          :height="100"
          :src="counselorInfo.avatar"
          :enable-preview="true"
        />
      </view>
      <view class="card-details flex-col ml-4">
        <view class="flex justify-between mb-2">
          <view class="counselor-name">{{ counselorInfo.name }}</view>
          <view class="counselor-price" v-if="counselorInfo.price">
            ￥{{ counselorInfo.price }}/小时
          </view>
        </view>
        <view class="counselor-specialty" v-if="counselorInfo.goodAt">
          擅长方向：{{ counselorInfo.goodAt }}
        </view>
        <view class="inline-block flex justify-start" v-if="counselorInfo.address">
          <view style="margin-top: 12rpx">
            <wd-icon name="location" size="28rpx"></wd-icon>
          </view>
          <view class="counselor-address">{{ counselorInfo.address }}</view>
        </view>
        <view class="counselor-introduction" v-if="counselorInfo.info">
          自我介绍：{{ counselorInfo.info }}
        </view>
        <view class="counselor-footer flex justify-between w-full">
          <view></view>
          <view>
            <wd-button type="primary" @click="contactCounselor">联系咨询师</wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import cache from '@/utils/cache'

interface CounselorInfo {
  name: string
  goodAt: string | null
  address: string | null
  price: number | null
  info: string | null
  avatar: string
}

const props = defineProps({
  counselorInfo: {
    type: Object as PropType<CounselorInfo>,
    required: true,
  },
})

const contactCounselor = () => {
  cache.set('counselorInfo', props.counselorInfo)
  console.log('联系咨询师')
  uni.navigateTo({
    url: '/pages/normal/consult',
  })
}
</script>

<style lang="scss" scoped>
.counselor-card {
  /* 根据需要调整样式 */
  min-width: 88vw;
  padding: 16px;
  margin-bottom: 16px;
  /* 可根据设计调整间距 */
}

.card-content {
  display: flex;
  align-items: center;
}

.card-avatar {
  /* 根据需要调整样式 */
  margin-right: 15px;
  /* 可根据设计调整间距 */
}

.card-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: start;

  .counselor-name,
  .counselor-specialty {
    overflow: hidden;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .counselor-price {
    overflow: hidden;
    font-weight: 600;
    line-height: 1.4;
    color: #007bff;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .counselor-address {
    margin: 8px 0;
    overflow: hidden;
    font-size: 0.9em;
    line-height: 1.4;
    color: #666;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.counselor-introduction {
  padding-right: 8px; // 右边距，保持文本不紧贴容器边缘
  margin: 12px 0; // 上下边距，增加视觉分隔
  font-size: 1em; // 自我介绍的字体大小
  line-height: 1.6; // 行高，增加阅读舒适度
  color: #333; // 字体颜色，深色有利于阅读
  word-break: break-word; // 防止文本溢出容器
}

.card-shadow {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
  /* 初始阴影效果 */
  transition: box-shadow 0.5s ease-in-out;
  /* 增加动态效果持续时间 */
}

.card-shadow:hover {
  box-shadow: 0 12px 36px rgb(0 0 0 / 35%);
  /* 悬停时增强阴影效果 */
}
</style>
